<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="../../css/public.css">
</head>

<body class="bg">
	<div class="header-top-sp">
		<div class="content" style="position: absolute;left: 20px;">
			<img src="../../static/icon.png" class="icon loginindex">
		</div>
		<div class="title-box" style="justify-content: center;">
			<div>
				<span>1.选择时间</span>
				<i class="iconfont icon-xiangyou1 size-setting"></i>
			</div>
			<div>
				<span>2.付款</span>
				<i class="iconfont icon-xiangyou1 size-setting"></i>
			</div>
			<div>
				<span>3.准备上课</span>
				<i class="iconfont icon-xiangyou1 size-setting"></i>
			</div>
		</div>
	</div>
	<div class="main">
		<div class="flex-main">
			<div class="line">
				<div class="avtor"></div>
				<h1 class="teachname">张老师</h1>
				<!-- <img src="../../static/pay/America.png" alt="America.jpg" class="img-icon"> -->
				<svg t="1637387213334" class="icon size-16" style="margin-left: 5px;width: 15px;height: 18px;"
					viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6062" width="200"
					height="200">
					<path
						d="M511.999573 1024c-12.629333 0-24.661333-4.437333-50.944-14.336-111.445333-42.24-205.482667-110.421333-271.616-197.632A503.466667 503.466667 0 0 1 85.332907 504.832V168.277333L511.999573 0l426.666667 168.277333v336.554667a503.466667 503.466667 0 0 1-104.106667 307.2c-66.133333 87.210667-160.170667 155.562667-271.616 197.632C536.74624 1019.562667 524.628907 1024 511.999573 1024zM294.82624 530.602667L455.423573 690.346667l317.013334-315.477334-55.893334-55.466666-261.12 259.669333-104.704-104.106667-55.893333 55.466667z"
						fill="#4FD367" p-id="6063"></path>
					<path
						d="M511.999573 2.304L936.532907 169.813333V505.173333c0 110.762667-35.84 216.746667-103.594667 305.92-66.048 86.784-159.402667 154.88-270.506667 196.949334-26.112 9.898667-38.058667 14.165333-50.432 14.165333-12.373333 0-24.32-4.437333-50.346666-14.165333-110.933333-41.898667-204.544-109.994667-270.506667-196.949334A502.357333 502.357333 0 0 1 87.380907 505.088V169.642667L511.999573 2.389333z m-56.405333 574.976l-102.997333-102.4-1.450667-1.450667-1.536 1.450667-54.272 54.016-1.450667 1.450667 1.450667 1.450666 158.72 158.037334 1.536 1.450666 1.536-1.450666 314.709333-313.173334 1.450667-1.365333-1.450667-1.536-54.272-54.101333-1.536-1.536-1.450666 1.536-258.986667 257.706666zM511.999573 0L85.332907 168.362667v336.469333c0 230.485333 152.149333 420.352 375.466666 504.832 25.173333 9.472 38.144 14.336 51.2 14.336 13.056 0 25.856-4.864 51.2-14.336 223.146667-84.48 375.466667-274.346667 375.466667-504.832V168.362667L511.999573 0z m-56.405333 580.266667l260.437333-259.157334 54.272 53.930667-314.709333 313.344-158.72-158.037333 54.272-53.930667L455.59424 580.266667z"
						fill="#4FD367" p-id="6064"></path>
				</svg>
			</div>
			<div class="line-two">
				<div class="first-text-one">
					<span>第1节课日期</span>
					<span>时间</span>
				</div>
				<div class="first-text-center">
					<span id='dates'></span>
					<span id="times"></span>
				</div>
				<!-- 		<div class="first-text-one">
						<span style="justify-content: flex-start;">GTM+9：00</span>
					</div> -->
			</div>
			<div class="line-two">
				<div class="first-text">
					<span style="justify-content: flex-start;">服务内容</span>
				</div>
				<div class="first-text">
					<span style="font-size: 12px;" id="istyk"></span>
					<span style="justify-content: center;">50分钟</span>
					<span id="price">$10.59</span>
				</div>
				<div class="first-text">
					<span style="font-size: 12px;">课时</span>
					<span style="justify-content: center;">1</span>
					<span></span>
				</div>
				<div class="first-text">
					<span style="font-size: 12px;">课程类型</span>
					<span id="kind"></span>
				</div>
				<div class="first-text">
					<!-- <span style="font-size: 12px;color: #3CB64C;font-weight: bold;">优惠</span>
					<span style="color: #3CB64C;font-weight: bold;">($20.90)</span> -->
				</div>
				<!-- 				<div class="first-text">
						<span style="font-size: 12px;font-weight: bold;">开始前12个
小时变更取消</span>
						<span style="font-weight: bold;">0.00</span>
					</div> -->
				<!-- <div class="first-text">
						<span style="font-size: 12px;font-weight: bold;">有效期</span>
						<span style="font-weight: bold;">8个月</span>
					</div> -->
				<div class="first-text tops">
					<span class="total">合计</span>
					<span class="total" id="total"></span>
				</div>
				<div class="btm">
					Seccure checkout
				</div>
			</div>
			<div class="line-three">
				<span>Payment method</span>
				<div class="flex-text">
					<i class="iconfont icon-suozhu size-10"></i>
					<span> It’s safe to pay on ChineseLessonsOnline.
						All transactions are protected by SSL encryption</span>
				</div>
				<div class="box-select">
					<div class="flex-box">
						<img src="../../static/pay/Icon_Payment_%20Visa.png" alt="Icon_Payment_%20Visa.png">
						<img src="../../static/pay/master.png" alt="master.png">
						<img src="../../static/pay/card-amex.png" alt="card-amex.png">
						<img src="../../static/pay/jcb.png" alt="jcb.png">
						<img src="../../static/pay/discover.png" alt="discover.png">
					</div>
					<input type="radio" name="" id="" checked="checked" value="" />
				</div>
				<div class="box-select">
					<i class="iconfont icon-zhifubao size-25"></i>
					<input type="radio" name="" id="" value="" />
				</div>
				<button type="button" class="btn" id="first-btns">continue</button>
			</div>
			<div class="box-footer" style="justify-content: flex-start;">
				<i class="iconfont icon-dunpai_shield_bg size-29"></i>
				<div class="text-div">
					<span class="title-text">保证100%的满意</span>
					<p>如果老师没有出现，我们将为您免费更换新老师，或
						为您全额退款。</p>
				</div>
			</div>
		</div>
	</div>
	<div class="last-footer">
		<ul>
			<li>2021 Aichi,Inc.</li>
			<li>用户条款</li>
			<li>支付退款政策</li>
			<li>隐私条款</li>
			<li>cookie条款</li>
		</ul>
	</div>
</body>

</html>
<script src="/js/public.js"></script>
<script src="../../js/dream-msg.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let params = window.location.href.split('?')[1].split('&'),
		obj = {}
	params.forEach(item => {
		let key = item.split('=')[0],
			value = item.split('=')[1]
		obj[key] = value
	})

	// 初始化数据
	payload(1, obj);

	$("#first-btns").click(function () {

		if ($('.box-select').eq(0).hasClass('actives')) {


			window.location.href = `/views/pay/bindcreatedcard.html?userid=${obj.userid}&coursetime=${obj.coursetime}&timequantum=${obj.timequantum}&skill=${obj.skill}`


		} else {
			Dreamer.success('暂无开通!')
		}
	})


	// 预加载默认输入
	$(function () {

		// let tyk = true;

		// if (obj.tyk) {

		// 	$('#istyk').html('体验课');
		// } else {
		// 	$('#istyk').html('日常会话课');
		// }
		console.log(obj)
		$('#istyk').html(decodeURI(obj.skill));
		$('.box-select').eq(0).addClass('actives')
		$('.title-box div').eq(1).css({ 'color': '#000000', 'font-weight': 'bold' })
	})



	//选中tabs 
	$('.title-box div').each(function () {
		$(this).click(function () {
			$('.title-box div').each(function () {
				$(this).css('color', '')
			})
			$(this).css({ 'color': '#000000', 'font-weight': 'bold' })
		})
	})
	// 选择支付方式
	$('.box-select').each(function () {
		$(this).click(function () {
			$('.box-select input').each(function () {
				$(this).prop('checked', false);
			})
			$('.box-select').removeClass('actives');
			$(this).addClass('actives');
			$(this).children('input').prop('checked', 'true');
		})
	})

</script>
<style type="text/css">
	.actives {
		border: 1px solid #2073D4 !important;
	}

	.img-icon {
		margin-left: 8px;
		width: 16px;
		height: 13px;
	}

	.header-top-sp {
		height: 56px;
		width: 100%;
		padding: 6px 1%;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.bg {
		background-color: rgba(237, 239, 240, 1);
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title-box {
		display: flex;
		align-items: center;
		width: auto;
		color: #7aa5bb;
		font-size: 12px;
		z-index: 10;
		cursor: pointer;
	}

	.title-box div:not(:first-child) {
		padding: 0 5px;
	}

	.size-setting {
		transform: rotate(360deg);
		font-size: 12px;
		font-weight: bold;
		cursor: pointer;
	}

	.main {
		margin-top: 20px;
		padding: 8px 20px 10px 20px;
		background-color: #FFFFFF;
		border-radius: 6px;

		box-shadow: rgba(212, 212, 212, 0.5) 0px 0px 10px 0px;
	}

	.avtor {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #89C2DE;
	}

	.flex-main {
		width: 350px;
		display: flex;
		flex-flow: column wrap;
	}

	.line {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 10px;
		padding-bottom: 15px;
		border-bottom: 1px solid #d3d3d3;
	}

	.line-two {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10px;
		padding-bottom: 15px;
		border-bottom: 1px solid #d3d3d3;
	}

	.line h1 {
		margin-left: 8px;
		color: #3C3C3C;
	}

	.first-text-one {
		width: 350px;
		color: #8F8F8F;
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		padding: 4px 0;
	}

	.first-text-one span {
		display: flex;
		font-weight: bold;
	}

	.first-text {
		width: 100%;
		color: #8F8F8F;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		padding: 4px 0;
		font-weight: bold;
	}

	.first-text span {
		width: 100px;
		display: flex;
	}

	.first-text span:last-child {
		justify-content: flex-end;
	}

	.first-text-center {
		width: 100%;
		color: #3C3C3C;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		font-weight: bold;
	}

	.first-text-else {
		width: 100%;
		color: #8F8F8F;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
	}

	.tops {
		margin-top: 20px;
	}

	.total {
		color: #3C3C3C;
		font-size: 18px;
	}

	.btm {
		margin-top: 16px;
		width: 100%;
		font-size: 14px;
		color: #3C3C3C;
		display: flex;
		justify-content: center;
		font-weight: bold;
	}

	.line-three {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 10px;
		padding-bottom: 12px;
		border-bottom: 1px solid #d3d3d3;
	}

	.line-three>span {
		font-size: 14px;
		color: #3C3C3C;
		font-weight: bold;
	}

	.flex-text {
		display: flex;
		align-items: baseline;
	}

	.size-10 {
		padding-top: 5px;
		font-size: 10px;
		color: #32D600;
	}

	.flex-text span {
		display: block;
		width: 80%;
		color: #32D600;
		font-size: 10px;
	}

	.box-select {
		margin-top: 8px;
		width: 100%;
		box-sizing: border-box;
		padding: 5px 10px 5px 15px;
		border: 1px solid #D8D8D8;
		border-radius: 6px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box-active {
		border: 1px solid #2073D4;
	}

	.flex-box {
		display: flex;
	}

	.flex-box img {
		padding: 0 2px;
		width: 40px;
		height: 25px;
	}

	.size-25 {
		color: #2073D4;
		font-size: 30px;
	}

	.btn {
		width: 40%;
		padding: 10px 0;
		border: none;
		background-color: #2073D4;
		font-size: 14px;
		border-radius: 6px;
		color: #fff;
		margin: auto;
		margin-top: 12px;
		cursor: pointer;
	}

	.box-footer {
		margin-top: 10px;
		display: flex;
		justify-content: flex-start;
	}

	.box-footer span {
		color: #3C3C3C;
		font-size: 10px;
		font-weight: bold;
	}

	.text-div {
		margin-left: 8px;
	}

	.title-text~p {
		width: 240px;
	}

	.box-footer p {
		padding-top: 6px;
		color: #9A9A9A;
		font-size: 10px;
		font-weight: bold;
	}

	.size-29 {
		font-size: 29px;
		color: #32D600;
	}

	.last-footer {
		position: absolute;
		bottom: 0px;
		margin-top: 24px;
		width: 100%;
		padding: 25px 0;
		color: #a2a2a2;
		font-size: 12px;
		border-top: 1px solid #c4c5c6;
		font-weight: bold;
	}

	.last-footer>ul {
		padding: 0 20%;
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}

	.last-footer>ui li {
		flex: 1;
		justify-content: center;
	}

	.img-icon {
		margin-left: 8px;
		width: 16px;
		height: 13px;
	}
</style>